<?php
include_once ('head.php');

?>
<div class="container" style="max-width: 1024px;">
    <div class="layui-card">
		<div class="layui-card-header">操作面板</div>
		<div class="layui-card-body">
			<div class="layui-form-item">
				<div class="layui-form layui-form-pane">
					<label class="layui-form-label">搜索</label>
					<div class="layui-input-block">
						<input type="text" id="content" autocomplete="off" placeholder="请输入关键字" value="<?=$_POST['content']?>" class="layui-input" style="padding-right: 68px;">
						<button style="position: absolute;top: 0;right: 1px; cursor: pointer;" type="button" class="layui-btn" onclick="search()">搜索</button>
					</div>
				</div>
				<br>
				<form class="layui-form layui-form-pane">
					<label class="layui-form-label">标题</label>
					<div class="layui-input-block">
						<input type="text" id="name" autocomplete="off" placeholder="请输入友链标题" value="" class="layui-input" style="padding-right: 1px;">
					</div>
					<hr >
					<label class="layui-form-label">链接</label>
					<div class="layui-input-block">
						<input type="text" id="url" autocomplete="off" placeholder="请输入跳转链接" value="" class="layui-input" style="padding-right: 1px;">
					</div>
					<hr >
					<label class="layui-form-label">备注</label>
					<div class="layui-input-block">
						<input type="text" id="remarks" autocomplete="off" placeholder="备注可留空" value="" class="layui-input" style="padding-right: 68px;">
						<button style="position: absolute;top: 0;right: 1px;
						cursor: pointer;" type="button" class="layui-btn" onclick="add()">添加</button>
					</div>
				</form>
			</div>
			
		</div>
	</div>
	
	<div class="layui-card">
		<div class="layui-card-header">友链列表</div>
		<div class="layui-card-body">
			<div style="text-align: left;">
				<table id="list" class="layui-table"></table>
			
			</div>
		</div>
	</div>
</div>
	<script src="../layui/layui.all.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<!--您的Layui代码start-->
	<script type="text/javascript">
		layui.use('table',function() {
			var table = layui.table;
			table.render({
				elem: '#list',
				height: 500,
				url: 'Ajax.php?my=friendlylist', //数据接口
				page: true, //开启分页
				cols: [[ //表头
				{
					field: 'id',
					title: 'ID',
					width: 80
				},{
					field: 'name',
					title: '标题',
				},{
					field: 'url',
					title: '链接',
					width: 100
				},{
					field: 'remarks',
					title: '备注',
				},{
					field: 'date',
					title: '入库日期',
					
				},{
					field: 'caozuo',
					title: '操作',
				}]]
			});
		});
		
		
		// 添加友链
		function add(){
			var name  = $('#name').val();
			var url = $('#url').val();
			var remarks = $('#remarks').val();
			if(name=='' || url==''){
				layer.msg('必填选项不能留空',{icon: 5});
			}else{
				var index  = layer.load(1, {shade: [0.6,'#000']}); //0.1透明度的白色背景
				$.ajax({
					type: "post",   
					url:  "Ajax.php", 
					data: "my=addlinks&name="+name+"&url="+url+"&remarks="+remarks,
					dataType: "json",
					success: function (res) {
						layer.close(index);
						if(res.code==1){
							layer.msg(res.msg,{icon: 6});
							layui.table.reload('list', {
								url: 'Ajax.php?my=friendlylist'
							});
						}else if(res.code==0){
							layer.msg(res.msg,{icon: 5});
						}
					},
					error: function (res) {
						layer.msg('请求失败',{icon: 5});
						layer.close(index);
					}
				});
			}
		}
		
		// 搜索
		function search(){
			var content = $('#content').val();
			if(content==''){
				// layer.msg('请输入关键字',{icon: 5});
				layui.table.reload('list', {
					url: 'Ajax.php?my=friendlylist'
				});
			}else{
				layui.table.reload('list', {
					url: 'Ajax.php?my=friendlylist&content=' + content
				});
			}
		}
		
		// 删除友链
		function delyl(id){
			layer.confirm('确定要删除此友链吗？', {btn: ['确定','取消']}, function(){
				var index = layer.load(1, {shade: [0.6,'#000']}); //0.1透明度的白色背景
				$.ajax({
					type: "post",   
					url:  "Ajax.php", 
					data: "my=delyl&id="+id,
					dataType: "json",
					success: function (res) {
						layer.close(index);
						if(res.code==1){
							layer.msg(res.msg,{icon: 6});
							layui.table.reload('list', {
								url: 'Ajax.php?my=friendlylist'
							});
						}else if(res.code==0){
							layer.msg(res.msg,{icon: 5});
						}
					},
					error: function (res) {
						layer.msg('请求失败',{icon: 5});
						layer.close(index);
					}   
				});
			});
		}
		
		// 发起修改操作悬浮窗
		function openedit(id,name,url,remarks){
			layer.open({
				type: 1,
				skin: 'layui-layer-rim', //加上边框
				area: ['420px', '240px'], //宽高
				content: '<form class="layui-form layui-form-pane"><label class="layui-form-label">标题</label><div class="layui-input-block"><input type="text"id="edit_name"autocomplete="off"placeholder="请输入友链标题"value="'+name+'"class="layui-input"style="padding-right: 1px;"></div><hr><label class="layui-form-label">链接</label><div class="layui-input-block"><input type="text"id="edit_url"autocomplete="off"placeholder="请输入跳转链接"value="'+url+'"class="layui-input"style="padding-right: 1px;"></div><hr><label class="layui-form-label">备注</label><div class="layui-input-block"><input type="text"id="edit_remarks"autocomplete="off"placeholder="备注可留空"value="'+remarks+'"class="layui-input"style="padding-right: 68px;"></div><button type="button"class="layui-btn layui-btn-fluid"onclick="edityl('+id+')">修改</button></form>'
			});
		}
		// 发起修改操作
		function edityl(id){
			var name 		 = $('#edit_name').val();
			var url 		 = $('#edit_url').val();
			var remarks	 	 = $('#edit_remarks').val();
			var index = layer.load(1, {shade: [0.6,'#000']}); //0.1透明度的白色背景
			if(name==''){
				layer.msg('请输入标题',{icon: 5});
			}else if(url==''){
				layer.msg('请输入链接',{icon: 5});
			}else{
				$.ajax({
					type: "post",   
					url:  "Ajax.php", 
					data: "my=edityl&id="+id+"&name="+name+"&url="+url+'&remarks='+remarks,
					dataType: "json",
					success: function (res) {
						layer.close(index);
						if(res.code==1){
							layer.msg(res.msg,{icon: 6});
							layui.table.reload('list', {
								url: 'Ajax.php?my=friendlylist'
							});
						}else if(res.code==0){
							layer.msg(res.msg,{icon: 5});
						}
					},
					error: function (res) {
						layer.msg('请求失败',{icon: 5});
						layer.close(index);
					}   
				});
			}
		}
	</script>
</body>
</html>
